<template>
    <div class="list-all" ref="wrapper" >
        <div>    
            <div class="now-class">
                <div class="title-class">当前班级</div>
                <div class="list border-topbottom">
                    <div class="now-list"
                         >{{this.addr}}</div>
                </div>
            </div>
            <div  v-for="(items, key) in allclass" :key="key"
                  :ref="key">
                <div class="title-class">{{key}}</div>
                <div class="item-list">
                    <div class="item border-topbottom"
                         v-for="item in items" :key="item.addr"
                         @click="handleclickchange(item)"  
                         >{{item.addr}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState , mapActions} from 'vuex'
import { setTimeout } from 'timers';
export default {
  name: 'classlist',
  props:{
      allclass:Object,
      grade:String
  },
  computed: {
      ...mapState(['addr'])
  },
  methods: {
      handleclickchange(item){
          // this.$store.dispatch('changeclass',item)  派发一个名字为changeclass的事件，携带item的参数
           this.changeclass(item)
           this.$router.push('/home')
      },
      ...mapActions(['changeclass'])
  },
  
  watch:{
      grade(){
          if (this.grade) {
              const element = this.$refs[this.grade][0]  //v-for得到的数组 ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]
              this.scroll.scrollToElement(element)
          }
      }
  },
  mounted(){
      setTimeout(()=>{
        this.scroll = new BScroll(this.$refs.wrapper,{click:true})
      },100)     
  },
}
</script>

<style scoped>
    .list-all{
        position: absolute;
        overflow: hidden;
        top: 1.58rem;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .now-class{
        overflow: hidden;
        height: 100%;
    }
    .title-class{
        height: .44rem;
        line-height: .44rem;
        background: #eee;
        padding-left: .2rem;
        color: #777;
        font-size: .26rem;
    }
    .list{
       padding: .24rem;
    }
    .now-list{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 45%;
        padding: .16rem;
        text-align: center;
        font-size: .36rem;
        border-radius: .12rem;
        background: #ccc;
    }
    .item{
        padding-left: .2rem;
        line-height: .8rem;
    }
</style>